// 联系人名单视图
import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.0
import QtGraphicalEffects 1.0

import com.yihu.xchat.enum 1.0
import com.yihu.xchat.util 1.0
import com.yihu.xchat.model 1.0
import "../widgets" as Widgets

import "../../js/view/RosterView.js" as Js

Rectangle {
    anchors.fill: parent

    color: "lightblue"

    // 联系人列表
    Rectangle {
        id: contactsList

        anchors.top: parent.top
        anchors.left: parent.left

        width: 200
        height: parent.height

        border.color: "lightgray"
        border.width: 1

        // 搜索
        Widgets.Search {
            id: search
            placeholderText: "搜索联系人，群组..."
        }

        // 联系人
        ListView {
            id: rosterView
            anchors.top: search.bottom
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.topMargin: 10

            width: parent.width
            Layout.fillHeight: true

            clip: true

            // 分组
            section.property: "group"
            section.criteria: ViewSection.FullString
            section.delegate: groupDeletage

            // 模型
            model: RosterSingleton

            // 委托
            delegate: contactDeletage

            highlight: Rectangle{
               color: "#EFF1F5"
               focus: true
            }

            // 信号
            signal sectionClicked(string name)
        }

        // 分组委托
        Component {
            id: groupDeletage

            Rectangle{
                id: sectionRect

                width: rosterView.width
                height: 24
                color: "transparent"

                property bool collapsed: true
                Image {
                    anchors.verticalCenter: parent.verticalCenter

                    x: 5
                    width: 10
                    height: 10
                    source: collapsed ? "qrc:/images/group_expand.png" : "qrc:/images/group_collapse.png"
                }

                Text {
                    anchors.verticalCenter: parent.verticalCenter

                    x: 19
                    font.bold: false
                    font.pixelSize: 15
                    text: section
                }

                Text {
                    id: contactStatistics
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 5

                    text: ""    // 更新分组在线状态
                }

                Image {
                    id: groupActions
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 5

                    width: 16
                    height: 16
                    visible: false
                    source: "qrc:/images/group_more.png"
                }

                MouseArea {
                    anchors.fill: parent

                    hoverEnabled: true

                    onClicked: {
                        onClicked: rosterView.sectionClicked(section);
                        collapsed = !collapsed;
                        rosterView.focus = true;
                    }

                    onEntered: {
                        contactStatistics.visible = false;
                        groupActions.visible = true;
                    }

                    onExited: {
                        contactStatistics.visible = true;
                        groupActions.visible = false;
                    }
                }
            }
        }

        // 联系人项目委托
        Component {
            id: contactDeletage

            Rectangle {
                id: contact
                width: rosterView.width
                height: visible ? itemHeight : 0

                color: "transparent"

                // 与视图的信号建立连接
                Connections {
                    target: contact.ListView.view
                    onSectionClicked: if (contact.ListView.section === name) visible = !visible;
                }

                property int itemHeight: 40
                property int imageWidth: 36
                property int imageHeight: 36

                Widgets.RoundImage{
                    id: contactPhoto

                    x: 10
                    width: imageWidth
                    height: imageHeight
                    source: thumbnail
                }

                // 离线头像应该显示为黑色。隐身也应该是
                Desaturate {
                    anchors.fill: contactPhoto
                    source: contactPhoto
                    desaturation: (availableStatus == X.OffLine || availableStatus == X.Invisible) ? 1.0 : 0.0
                }

                Text {
                    id: contactJid
                    anchors.top: parent.top
                    anchors.right: parent.right
                    anchors.left: contactPhoto.right

                    x: contactPhoto.width + contactPhoto.x + 5

                    elide: Text.ElideRight
                    font.pixelSize: 14

                    text: nickName == "" ? bareJid.split("@")[0] : nickName
                }

                Text {
                    id: contactStatusText
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 4

                    x: contactPhoto.width + contactPhoto.x + 5
                    font.pixelSize: 12
                    color: "gray"
                    text: (availableStatus != X.OffLine ? "[在线]" : "[离线]") + " " + description.toString()
                }

                MouseArea {
                    anchors.fill: parent

                    // 点击展示名片信息
                    onClicked: {
                        rosterView.currentIndex = index;
                        vcard.photo = thumbnail == "" ? ConfigSingleton.defaultAvatar : thumbnail
                        vcard.bareJid = bareJid
                        vcard.nickName = nickName == "" ? "-" : nickName
                        vcard.url = url === "" ? "-" : url
                        vcard.email = email === "" ? "-" : email
                        vcard.telephone = telephone === "" ? "-" : telephone
                        vcard.mobile = mobile === "" ? "-" : mobile
                        vcard.address = address === "" ? "-" : address
                        vcard.description = description === "" ? "-" : description
                    }

                    // 双击打开新的会话
                    onDoubleClicked: {
                        SessionsSingleton.createSession(bareJid, X.P2P);
                        rootView.switchTopLevelView(rootView.topLevelViews.sessionsView);
                    }
                }
            }
        }
    }

    // 名片
    Widgets.ContactVCard {
        id: vcard

        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: contactsList.right
    }

    // 消息对话框
    MessageDialog{
        id: messageDialog
    }
}
